<template>
  <BasicModal
    :title="getTitle"
    :width="450"
    :canFullscreen="false"
    :centered="true"
    :destroyOnClose="true"
    @register="registerModal"
    @ok="handleSubmit"
  >
    <BasicForm @register="registerForm" :model="model" />
  </BasicModal>
</template>

<script lang="ts" name="BankModal" setup>
import {ref, computed, unref, reactive} from 'vue';
import {BasicModal, useModalInner} from '/@/components/Modal';
import {BasicForm, useForm} from '/@/components/Form/index';
import {ValidateErrorEntity} from 'ant-design-vue/es/form/interface';
import {bankSave, bankById} from "/@/views/full/bank/types/bank.api";
import {useMessage} from "/@/hooks/web/useMessage";

const $message = useMessage();

// 声明Emits
const emit = defineEmits(['success', 'register']);

const labelCol = { span: 6 }
const wrapperCol = { span: 16 }
//表单modal
const model = reactive<any>({})

//表单配置
const [registerForm, {resetFields, setFieldsValue, validate}] = useForm({
  schemas: [
    { label: "", field: "id", component: "Input", show: false },
    { label: "登记名", field: "djm", component: "Input", required: true },
    { label: "户名", field: "name", component: "Input", required: true },
    { label: "卡号", field: "code", component: "Input", required: true },
    { label: "开户行", field: "khh", component: "Input", required: true },
    { label: "银行图标", field: "logo",
      component: "JDictSelectTag",
      componentProps: {
        dictCode: "bankType",
        placeholder: "请选择银行",
        getPopupContainer: () => document.body,
      },
    },
    { label: "部门范围", field: "ddlx",
      component: "JDictSelectTag",
      componentProps: {
        dictCode: "ddlxType",
        placeholder: "请选择银行",
        mode: "multiple",
        maxTagCount: 3,
        getPopupContainer: () => document.body,
      },
    },
    {
      label: "状态",
      field: "stat",
      component: "JDictSelectTag",
      componentProps: {
        dictCode: "stateType",
        placeholder: "请选择状态",
        stringToNumber: true,
      },
      defaultValue: 1,
      required: true
    },
    { label: "排序", field: "sort", component: "InputNumber", componentProps: { placeholder: " " } }
  ],
  labelWidth: 80,
  baseColProps: {span: 22},
  showActionButtonGroup: false,
});

const formEl = ref();
const isUpdate = ref(true);
//表单赋值
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
  setModalProps({confirmLoading: false});
  isUpdate.value = !!data?.isUpdate;
  await resetFields()
  let record:any = {}
  if (isUpdate.value) {
    record = await bankById({id: data?.record?.id});
    //用户权限
    const ddlxArray = record.ddlx && record.ddlx.split(",")
    record.ddlx = ddlxArray <= 0 ? [] : ddlxArray.filter(item => item)
  }
  //console.info("useModalInner", record.ddlx)
  await setFieldsValue(record)
});
//标题
const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));

//表单提交事件
async function handleSubmit() {
  try {
    setModalProps({confirmLoading: true});
    const values = await validate();
    await bankSave(values).then((res) => {
      if (res.success) {
        $message.createMessage.success(res.message);
        //关闭弹窗
        closeModal();
        emit("success")
      } else {
        $message.createMessage.warning(res.message);
      }
    });
  } catch (e) {
    console.log(e);
  } finally {
    setModalProps({confirmLoading: false});
  }
}

</script>

<style lang="less" scoped>

</style>
